@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);

  pac-model-cube-structure {
    display: flex;
    flex-direction: column;

    ngm-splitter {
      height: 100%;
    }

    .pac-model__sub-area {
      display: flex;
      flex-direction: column;
    }

    /** List 布局, 包括高度 Hover 等自定义样式, TODO: 移到专门的组件样式中 */
    .ngm-list-base {
      .ngm-list-item {
        // height: 36px;
        // min-height: 36px;
        position: relative;
        cursor: pointer;
        font-size: 0.75rem;

        &:hover, &:focus {
          background-color: color.change(mat.get-color-from-palette($primary), $alpha: 0.1);
          color: mat.get-color-from-palette($primary);

          .ngm-display-behaviour--option-value {
            opacity: 1;
          }
        }

        &.selected {
          background-color: color.change(mat.get-color-from-palette($primary), $alpha: 0.2);
          color: mat.get-color-from-palette($primary);
        }

        &.cdk-tree-node {
          padding-right: 16px;
        }

        .ngm-display-behaviour--option-value {
          opacity: .5;
          transition: opacity 100ms ease-in;
        }
      }
    }

    .ngm-list-item {
      .ngm-entity-property {
        flex: 1;

        .mat-icon {
          height: 14px;
          width: 14px;
          font-size: 14px;
          line-height: 14px;
        }
      }
    }
    
    .ngm-mdx-cube__add {
      visibility: hidden;
    }
    .cdk-tree-node.mat-tree-node, .mat-expansion-panel-header {
      &:hover {
        .ngm-mdx-cube__add {
          visibility: visible;
        }
      }
    }

    .mat-selection-list {
      padding-top: 0;

      .mat-mdc-list-option {
        .mat-mdc-list-text {
          padding-right: 0;
        }
      }
    }

    .mat-expansion-panel {
      .mat-mdc-list-item {
        .mat-mdc-list-item-content {
          padding-left: 20px;
        }
      }
    }

    .ngm-action-strip  {
      position: absolute;
      right: 0;
      background-color: mat.get-color-from-palette($background, card);
      border-radius: 15px;
    }
  }
}

@mixin density($config-or-theme) {

}
